<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 Vue生命周期</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
    <br>

    <button @click="update">更新数据</button>
    <button @click="destroy">销毁组件</button>

</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'msg word'
        },
        methods: {
            update() {
                this.msg = 'hello ！';
            },
            destroy() {
                vm.$destroy(); // 销毁组件  等价于  this.destroy()
            }
        },
        beforeCreate() {
            console.log('1 beforeCreate 组件实例刚刚创建，还未进行数据观测和事件配置');
        },
        created() { // 常用！！！
            // console.log(this.msg);
            console.log('2 created // 常用！！！ 实例已经创建完成，并且已经进行数据观测和事件配置');
        },
        beforeMount() {
            console.log('3 beforeMount 模板编译之前，还没挂载');
        },
        mounted() { //常用！！！
            console.log('4 mounted //常用！！ 模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');

        },
        beforeUpdate() {
            console.log('5 beforeUpdate 组件更新之前')
        },
        updated(){
          console.log('6 updated 组件更新之后')
        },
        beforeDestroy(){
            console.log('7 beforeDestroy 组件销毁之前');
        },
        destroyed(){
            console.log('8 destroyed 组件销毁之后');
        }

    });
</script>
</body>
</html>